<template>
  <div class="sql-detail">
    <el-alert
      class="sql-detail-sql"
      :title="data.SQL"
      type="success"
      :closable="false">
    </el-alert>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card shadow="always">
          <div slot="header">
            <span><strong>ParseView</strong></span>
          </div>
          <el-descriptions :labelStyle="{width:'15%'}" :contentStyle="{width: '85%'}" :column="1" border>
            <el-descriptions-item v-for="(it) in ParseView" :key="it.name">
              <template slot="label">
                <div class="sql-detail-key"
                     :title="langData(`${it.name}Desc`)===`${it.name}Desc`?'':langData(`${it.name}Desc`)">
                  {{ langData(it.name) }}
                </div>
              </template>
              <div class="sql-detail-value"> {{ data[it.value] }}</div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card shadow="always">
          <div slot="header">
            <span><strong>LastSlowView</strong></span>
          </div>
          <el-descriptions :labelStyle="{width:'15%'}" :contentStyle="{width: '85%'}" :column="1" border>
            <el-descriptions-item v-for="(key) in LastSlowView" :key="key">
              <template slot="label">
                <div class="sql-detail-key" :title="langData(`${key}Desc`)===`${key}Desc`?'':langData(`${key}Desc`)">
                  {{ langData(key) }}
                </div>
              </template>
              <div class="sql-detail-value"> {{ data[key] }}</div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card shadow="always">
          <div slot="header">
            <span><strong>LastErrorView</strong></span>
          </div>
          <el-descriptions :labelStyle="{width:'15%'}" :contentStyle="{width: '85%'}" :column="1" border>
            <el-descriptions-item v-for="(key) in LastErrorView" :key="key">
              <template slot="label">
                <div class="sql-detail-key" :title="langData(`${key}Desc`)===`${key}Desc`?'':langData(`${key}Desc`)">
                  {{ langData(key) }}
                </div>
              </template>
              <div class="sql-detail-value"> {{ data[key] }}</div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-card shadow="always">
          <div slot="header">
            <span><strong>OtherView</strong></span>
          </div>
          <el-descriptions :labelStyle="{width:'15%'}" :contentStyle="{width: '85%'}" :column="1" border>
            <el-descriptions-item v-for="(key) in OtherView" :key="key">
              <template slot="label">
                <div class="sql-detail-key" :title="langData(`${key}Desc`)===`${key}Desc`?'':langData(`${key}Desc`)">
                  {{ langData(key) }}
                </div>
              </template>
              <div class="sql-detail-value"> {{ data[key] }}</div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {sqlDetail} from "@/api/druidMonitor";
import lang from "@/utils/datasourceLanguage";

@Component({name: 'SqlDetail'})
export default class SqlDetail extends Vue {
  // 表格数据
  private data: any = {};
  private ParseView: any = [
    {name: "Tables", value: 'parsedTable'},
    {name: "Fields", value: 'parsedFields'},
    {name: "Coditions", value: 'parsedConditions'},
    {name: "Relationships", value: 'parsedRelationships'},
    {name: "OrderByColumns", value: 'parsedOrderbycolumns'}
  ];
  private LastSlowView: any = ["MaxTimespan", "MaxTimespanOccurTime", "LastSlowParameters"];
  private LastErrorView: any = ["LastErrorMessage", "LastErrorClass", "LastErrorTime", "LastErrorStackTrace"];
  private OtherView: any = ["BatchSizeMax", "BatchSizeTotal", "BlobOpenCount", "ClobOpenCount", "ReaderOpenCount", "InputStreamOpenCount", "ReadStringLength", "ReadBytesLength"];

  getData() {
    sqlDetail(this.$route.params.id || '').then((response: any) => {
      this.data = response.data;
    }).catch((e) => {
      console.error(e);
    });
  }

  langData(key: string) {
    return lang[key] ? lang[key][1] : key;
  }

  mounted() {
    this.getData();
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/index.scss';

$margin-bottom: 20px;
.sql-detail {
  @include wh();

  &-sql {
    margin-bottom: $margin-bottom;
  }

  ::v-deep .el-descriptions__table {
    table-layout: fixed;
  }

  &-key, &-value {
    overflow: hidden; //超出宽度部分隐藏
    text-overflow: ellipsis; //超出部分显示省略号
  }

  &-key {
    cursor: pointer;
  }

  .el-row {
    margin-bottom: $margin-bottom;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
